<template>
	<slot :onOpenDialog="onOpenDialog" :name="selectedNames">
		<el-input
			:modelValue="selectedNames.join()"
			class="width-item"
			type="text"
			:placeholder="placeholder"
			readonly
			@click="onOpenDialog"
			v-bind="$attrs"
		>
			<el-tag closable :disable-transitions="true">
				{{ selectedNames }}
			</el-tag>
		</el-input>
	</slot>

	<div class="liebiao">
		<el-dialog
			v-model="visible"
			:title="title"
			@close="quxiao"
			:close-on-click-modal="false"
			:destroy-on-close="true"
		>
			<!-- <div class="classification">
				<div class="classification-left">
					<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
						<el-tab-pane label="按部门分类" name="department">
							<div class="classification-department">部门列表</div>
							<el-tree @node-click="tabList" :data="dataList" :props="defaultProps"></el-tree>
						</el-tab-pane>
						<el-tab-pane label="按群组分类" name="group">
							<div class="classification-department">群组列表</div>
							<el-tree @node-click="tabList" :data="dataList" :props="defaultProps"></el-tree>
						</el-tab-pane>
					</el-tabs>
				</div>
				<div class="classification-right">
					<div>
						<el-input :placeholder="placeholders" v-model="selectText">
							<template #append>
								<el-button :icon="Search" @click="onSearch">搜索</el-button>
							</template>
						</el-input>
					</div>
					<div class="details">
						<el-table
							type="card"
							highlight-current-row
							@current-change="handleSelectionChange"
							:data="tableData"
							border
							style="width: 100%"
						>
							<el-table-column prop="name" label="部门"></el-table-column>
						</el-table>
					</div>
				</div>
			</div> -->
			<!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="部门" name="department">
				</el-tab-pane>
				<el-tab-pane label="群组" name="group">
					<el-tree :data="dataList" :props="defaultProps" @node-click="tabList" />
				</el-tab-pane>
			</el-tabs> -->
			<div style="margin-bottom: 10px">
				<el-input :placeholder="placeholders" v-model="selectText">
					<template #append>
						<el-button :icon="Search" @click="onSearch">搜索</el-button>
					</template>
				</el-input>
			</div>
			<div class="content" v-if="tableData.length == 0">
				<el-tree
					:default-expanded-keys="[9, 10]"
					default-expand-all
					:data="dataList"
					:props="defaultProps"
					@node-click="tabList"
				/>
			</div>
			<div class="content" v-else>
				<div style="display: flex; justify-content: flex-end; margin-bottom: 5px">
					<el-button @click="onReturn">返回</el-button>
				</div>
				<!-- <div v-for="(item, index) in tableData" :key="index">
					{{ item.name }}
				</div> -->
				<el-table
					type="card"
					highlight-current-row
					@row-click="handleSelectionChange"
					:data="tableData[current - 1]"
					border
					style="width: 100%"
				>
					<el-table-column prop="name" label="部门"></el-table-column>
				</el-table>
				<div class="disFlex">
					<el-pagination
						layout="prev, pager, next"
						v-model:current-page="current"
						v-model:page-size="pageSize"
						:total="totalList"
					></el-pagination>
				</div>
			</div>
			<div></div>
			<div class="tip">
				<div class="tip-item">
					部门选择：<el-tag
						style="margin-right: 10px"
						closable
						:disable-transitions="false"
						v-if="selectedNames.length != 0"
						@close="tagClose"
					>
						{{ selectedNames.join() }}
					</el-tag>
				</div>
				<div>
					<!-- <el-button type="danger" @click="onClear">取消全部选中</el-button> -->
				</div>
			</div>

			<template #footer>
				<el-button @click="quxiao">取消</el-button>
				<el-button type="primary" @click="onConfirm">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { Search, RefreshLeft } from "@element-plus/icons-vue"
import { getAxios } from "/axios"
import { ElMessage, ElMessageBox } from "element-plus"

const props = defineProps({
	modelValue: {
		type: Array,
		default: () => [],
	},
	placeholder: {
		type: String,
		default: "",
	},
	placeholders: {
		type: String,
		default: "",
	},
	title: {
		type: String,
		default: "",
	},
})
const emits = defineEmits(["update:modelValue", "depName", "close"])
const dataList = ref([]) //部门列表
const activeName = ref("department") //部门
const selectText = ref("") //搜索
const type = ref("1") //判断部门还是群组
const authNameSrc = ref(false)
let authName = ref("")
const current = ref(1)
const pageSize = ref(10)
const totalList = ref(null)
let checked = ref([])
const zancun = ref([])

const defaultProps = reactive({
	children: "children",
	label: "name",
})
//切换部门/群组
// const handleClick = event => {
// 	if (event.props.label == "部门") {
// 		type.value = 1
// 	} else {
// 		type.value = 2
// 	}
// 	list()
// }
const tableData = ref([])

const visible = ref(false)
const selected = computed({
	get() {
		checked.value = [].concat(...props.modelValue)
		return props.modelValue
	},
	set(selected) {
		emits("update:modelValue", selected)
	},
})
const selectedIds = computed(() => selected.value.map(item => item.id))
const selectedNames = computed(() => selected.value.map(item => item.name))

function onOpenDialog() {
	zancun.value = selected.value
	visible.value = true
}

// function onConfirm() {
// 	visible.value = false
// }
// function isActive(item) {
// 	if (item) {
// 		return !!~checked.value.findIndex(check => check.id == item.id)
// 	} else {
// 		return false
// 	}
// }
async function list() {
	dataList.value = await getAxios("/system/sysDept/list")
}
list()
//获取部门树级菜单
async function tabList(node, val, data) {
	selected.value = [
		{
			name: node.name,
			id: node.id,
		},
	]
	authNameSrc.value = true
}
let deptldName = ref("")
//点击表格 选中作者
const handleSelectionChange = async val => {
	if (!val) return
	selected.value = [
		{
			name: val.name,
			id: val.id,
		},
	]

	authNameSrc.value = true
	emits("depName", deptldName)
}
//用户点击标签删除
const tagClose = () => {
	authName.value = ""
	deptldName.value = ""
	authNameSrc.value = false
	selected.value = []
}
// 确定按钮
function onConfirm() {
	// selected.value = [].concat(...checked.value)
	zancun.value = JSON.parse(JSON.stringify(selected.value))
	visible.value = false
}

const onSearch = async () => {
	if (selectText.value == "") {
		return ElMessage.error("请输入搜索内容")
	}
	const res = await getAxios(`/system/sysDept/list?name=${selectText.value}`)
	const str = res
	tableData.value = sliceArr(str, pageSize.value)
	totalList.value = res.length
	selectText.value = ""
}
const sliceArr = (arr, pageSize) => {
	const result = []
	let count = 0
	while (count * pageSize < arr.length) {
		result.push(arr.slice(count * pageSize, pageSize * (count + 1)))
		count++
	}
	return result
}
const onReturn = () => {
	selectText.value = ""
	tableData.value = []
}
const quxiao = () => {
	visible.value = false
	selectText.value = ""
	tableData.value = []
	selected.value = zancun.value
}
</script>

<style lang="scss" scoped>
@import "/style/basis";
.tip {
	border-top: 1px solid #2972fa;
	border-bottom: 1px solid #2972fa;
	height: 60px;
	margin: 30px 0 0;
	padding: 13px;
	display: flex;
	justify-content: space-between;
}
.check {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}
.change {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.classification {
	display: flex;
	margin-bottom: 20px;
	height: 400px;
}
.classification-left {
	width: 35%;
	margin-right: 20px;
	border: 1px solid #eee;
	border-radius: 5px;
	overflow: scroll;
	background-color: #f4faff;
}
.classification-left::-webkit-scrollbar {
	display: none;
}
.classification-right {
	// flex: 1;
	width: 65%;
}
.classification-department {
	width: 100%;
	text-align: center;
}
.details {
	// padding: 20px 0;
	overflow: scroll;
	padding-top: 15px;
}
.details::-webkit-scrollbar {
	display: none;
}
::v-deep.el-tabs {
	height: 100%;
	background-color: #f4faff;
}
.el-tree-node__content {
	background-color: #fff;
}
.width-item {
	width: 250px;
	@include maxWidth(450) {
		width: 200px;
	}
}
.liebiao {
	:deep(.el-dialog) {
		width: 800px !important;
		overflow-y: scroll;
		// @include maxWidth(768) {
		// 	width: 100vw !important;
		// }
	}
	::v-deep(.el-input__wrapper) {
		box-shadow: 0 0 0 1px #bbb inset;
	}
}
.content {
	height: 400px;
	overflow-y: scroll;
	.disFlex {
		display: flex;
		justify-content: center;
	}
}
</style>
